import React from 'react';
import Editor from './Editor';

export default function O1() {
  const editorConfig = {
    // 编辑器宽度
    width: 1200,
    // 编辑器高度
    height: 800,
    // 编辑器类型，支持 word（文档）、cell（表格）、slide（PPT）
    documentType: 'word',
    // 文档配置
    document: {
      // 文件类型
      fileType: 'docx',
      // 文档标识符
      key: 'test1.docx',
      // 文档地址，使用环境变量配置
      url: `${process.env.VUE_APP_API_SERVER}/static/test1.docx`,
      // 文档标题
      title: '测试文档一.docx'
    }
  };

  return <Editor config={editorConfig} loading={false} />;
}
// export default function O1(){
//   // 编辑器配置项，完整配置项参见：https://api.onlyoffice.com/editors/config/
//   const editorConfig = {
//     // 编辑器宽度
//     width: 1200,
//     // 编辑器高度
//     height: 800,
//     // 编辑器类型，支持 word（文档）、cell（表格）、slide（PPT）
//     documentType: 'word',
//     // 文档配置
//     document: {
//       // 文件类型
//       fileType: 'docx',
//       // 文档标识符
//       key: 'test1.docx',
//       // 文档地址，绝对路径
//       url: `10.0.109.78:3000/static/test1.docx`,
//       // 文档标题
//       title: '测试文档一.docx'
//     }
//   }
//   let id= `editor-${new Date().getTime().toString('32')}`
//   React.useEffect(()=>{
//     initEditor();
//     return () => {
//       editor.destroyEditor()
//       editor = null
//     };
//   },[]);
//   let editor=null;
//   const initEditor=()=> {
//         const scriptId = `script-${id}`
//         const added = document.querySelector(`#${scriptId}`)
//         if (!added) {
//           const script = document.createElement('script')
//           script.id = scriptId
//           script.src = "http://10.0.108.84:9000/web-apps/apps/api/documents/api.js"
//           script.onload = createEditor
//           document.head.appendChild(script)
//         } else {
//           createEditor()
//         }
//       }
//       // 创建编辑器
//   const createEditor=()=> {
//         if (editor) {
//           editor.destroyEditor()
//           editor = null
//         }
//         editor = new window.DocsAPI.DocEditor(id, editorConfig)
//       }
//   return (<div><div id={id}>{id}</div></div>);
// }